<template>
  <su-page bg="#f7f7f7">
    <su-body padding="0 10px" class="user_header_bg">
      <view class="user_header">
        <view class="user_icon" @click="myInfoSettingHandle()">
          <text class="iconfont icon-erweima"></text>
        </view>
        <u-avatar :src="myInfo.avatar" default-url="../../../../static/images/avatar-old.jpg" size="70"></u-avatar>
        <view class="user_message">
          <text class="user_message_name">{{userName}}</text>
          <view class="user_message_text">
            {{unitName}}
          </view>
        </view>
      </view>
      <!-- 功能列表 -->
      <view class="user_menu_box">
        <!-- group2 -->
         <view class="su-cell-group shadow">
          <view class="su-cell" v-for="(item,index) in group2" :key="index" @click="gotoHandel(item)">
            <view class="su-cell-icon">
              <text :class="['iconfont',item.icon]"></text>
            </view>
            <view class="su-cell-label">
              {{item.name}}
            </view>
            <view class="su-cell-right">
              <text class="su-cell-description">{{item.description || homeData[item.data] ||''}}</text>
              <text class="iconfont icon-arrow-right-line"></text>
            </view>
          </view>
        </view>
        <!-- group3 -->
        <view class="su-cell-group shadow">
          <view class="su-cell" v-for="(item,index) in group3" :key="index" @click="gotoHandel(item)">
            <view class="su-cell-icon">
              <text :class="['iconfont',item.icon]"></text>
            </view>
            <view class="su-cell-label">
              {{item.name}}
            </view>
            <view class="su-cell-right">
              <text class="su-cell-description">{{item.description || homeData[item.data] || ''}}</text>
              <text class="iconfont icon-arrow-right-line"></text>
            </view>
          </view>
        </view>

      </view>
    </su-body>
  </su-page>
</template>

<script>
  /**
   * @description 我的
   * 设计图 4-1
   * @date 2022-03-12
   * @version v1.0.1
   * @author gf
   */
  import {
    mapState
  } from 'vuex'
  import {
    logout,
    getUserInfo,
    getCarerUserInfo
  } from '@/common/api.js'
  export default {
    data() {
      return {
        //我的页面展示账号名跟单位名
				userName: JSON.parse(uni.getStorageSync('userInfo')).HUMANNAME || '',
				unitName: JSON.parse(uni.getStorageSync('userInfo')).UNITNAME || '',
        myInfo: {},
        carerInfo:{},
        showLogoutModal: false,
        homeData: {
          renzheng:'去认证',//是否已认证
          yanglaoyuan:'',//绑定的养老院名称
        },
        // group2: [{
        //     id: '2-1',
        //     name: "我的审批",
        //     icon: "icon-fanghubaohu",
        //     route: {
        //       url: 'pages/package2/carer-detail/carer-detail'
        //     }
        //   },
        //   {
        //     id: '2-2',
        //     name: "我收藏的",
        //     icon: "icon-zhuye",
        //     route: {
        //       url: 'pages/package2/skilled-setting/skilled-setting'
        //     }
        //   },
        //   {
        //     id: '2-3',
        //     name: "我盘点的",
        //     icon: "icon-xihuan",
        //     route: {
        //       url: 'pages/package2/skilled-price/skilled-price'
        //     }
        //   },
        //   {
        //     id: '2-4',
        //     name: "我的申请",
        //     icon: "icon-hua",
        //     route: {
        //       url: 'pages/package2/carerExperience/carerExperience'
        //     }
        //   },
        // ],
        group3: [{
            id: '3-1',
            name: "联系我们",
            icon: "icon-printer",
            route: null
          },
          {
            id: '3-2',
            name: "退出登录",
            icon: "icon-balance-list",
            route: 'pages/main/login/login',
            action: 'confirmLogout'
          },
        ]
      }
    },
    computed: {
      ...mapState(['userInfo', 'token'])
    },
    onLoad(parms) {
      // this.getMy();
    },
    watch: {
      token(val) {
        // this.getMy()
      }
    },
    methods: {
      getMy() {
        getUserInfo().then(res => {
          console.log(res)
          this.myInfo = res.data || {}
        })
      },
      gotoHandel(item) {
        console.log(item)
        if (item.route) this.$u.route(item.route)
        if (item.action) {
          this[item.action]()
        }
      },
      //护工二维码
      myInfoSettingHandle() {
        this.$u.route({
          url: '/pages/package2/carer-detail/carer-detail',
          params: {
            id: this.myInfo.userId
          }
        })
      },
      //退出登录
      confirmLogout() {
        logout().then(res => {
          this.$store.commit('logout')
          // this.$u.route({
          // 	url: 'pages/main/login/login'
          // })
        })
      }
    }
  }
</script>

<style lang="scss">
  .user_header {
    padding: 50upx 20upx 50upx 20upx;
    display: flex;
    position: relative;
  }

  // .user_header_bg {
  //   background: #F7F7F7;
  // }

  .user_icon {
    position: absolute;
    right: 20upx;
    top: 30upx;

    /deep/span {
      font-size: 45upx;
      color: #999;
    }
  }

  .user_message {
    flex: 1;
    margin-left: 30upx;
    margin-top: 20upx;

    &_name {
      font-size: 40upx;
      color: #333;
      font-weight: bold;
    }

    &_text {
      font-size: 28upx;
      color: #333;
      padding-top: 14upx;
      display: flex;
      align-items: center;
    }

    &_like {
      font-size: 28upx;
      color: #333;
    }

  }

  .user_menu_box {
    padding-top: 20upx;
    border-radius: 30upx 30upx 0 0;
    margin-top: -35upx;

    .btn_out {
      .u-button--info {
        color: #ABABAB;
        font-weight: 600;
      }
    }
  }

  .user_menu_item {
    padding: 30upx 46upx;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;

    .iconfont {
      color: #666;
      padding-right: 10upx;
      font-size: 40upx;
    }

    &_text {
      flex: 1;
      align-items: center;
    }

    &_icon_right {
      padding-top: 5upx;

      .iconfont {
        font-size: 25upx;
        color: #999;

      }
    }
  }

  .my-orders {
    &-wrap {
      background-color: #fff;
      border-radius: 12upx;
      margin-bottom: 24upx;
    }

    &-header {
      display: flex;
      padding: 30upx 30upx 10upx;
      font-size: 28upx;

      &__title {
        flex: 1;
        font-weight: bold;
      }

      &__right {
        font-size: 24upx;
        display: flex;
        align-items: center;
        color: #999;

        .iconfont {
          font-size: inherit;
          margin-left: 6upx;
        }
      }
    }

    &-box {
      display: flex;
    }

    &-item {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 30upx 0;

      &:active {
        opacity: 0.7;
        background-color: #F7F7F7;
      }
    }

    &-icon {
      font-size: 54upx;
      margin-bottom: 6upx;
      color: #333;
    }

    &-label {
      font-size: 26upx;
      color: #666;
    }
  }
  .user-card-entry{
    background-image: linear-gradient(138deg, #FFEA9B 0%, #EACB79 100%);
    border-radius: 7px 7px 0 0;
    margin-left: 30upx;
    margin-right: 30upx;
    padding: 30upx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /deep/.u-button{
      border: none;
    }
    &__icon{
      width: 88upx;
      height: 88upx;
      border-radius: 60upx;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 30upx;
      .iconfont{
        font-size: 60upx;
        background-image: linear-gradient(180deg, #F7CF75 0%, #E17A1B 100%);
        background-clip: text;
        color: transparent;
      }
    }
    &__main{
      flex: 1;
    }
    &__title{
      font-size: 32upx;
      color: #6D4315;
      font-weight: bold;
    }
    &__description{
      font-size: 24upx;
      color: #865110;
      opacity: 0.8;
    }
  }
</style>
